<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件处理机制</title>
        <style type="text/css">
            .outer,
            .middle,
            .inner {
                margin: 50px;
                border: 2px solid transparent;
                min-height: 100px;
            }
            .outer { border-color: gray; }
            .middle { border-color: blue; }
            .inner { border-color: red; }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="middle">
                <div class="inner">事件处理机制</div>
            </div>
        </div>

        <script type="text/javascript">
            (function(){

                const phases = {
                    [Event.NONE]: 'NONE',
                    [Event.CAPTURING_PHASE]: 'CAPTURING',
                    [Event.AT_TARGET]: 'AT_TARGET',
                    [Event.BUBBLING_PHASE]: 'BUBBLING'
                }

                const outer = document.querySelector( '.outer' );
                const middle = document.querySelector( '.middle' );
                const inner = document.querySelector( '.inner' );

                const type = 'click' ;
                const capture = true ;
                const bubble = !capture ;

                /*
                outer.addEventListener( type , function(e){
                    console.log( '当时给谁绑定了事件监听器 this 就是谁:' , this );
                    console.log( '哪个元素发生了相应的事件则事件目标就是谁: ' , e.target );
                    console.log( '事件处理处于哪个阶段:' , e.eventPhase , phases[ e.eventPhase ] );
                } , capture );

                outer.addEventListener( type , function(e){
                    console.log( '当时给谁绑定了事件监听器 this 就是谁:' , this );
                    console.log( '哪个元素发生了相应的事件则事件目标就是谁: ' , e.target );
                    console.log( '事件处理处于哪个阶段:' , e.eventPhase , phases[ e.eventPhase ] );
                } , bubble );
                */
                
                outer.addEventListener( type , function(e){
                    console.log( this , e.target , e.eventPhase , phases[ e.eventPhase ] );
                } , capture );

                outer.addEventListener( type , function(e){
                    console.log( this , e.target , e.eventPhase , phases[ e.eventPhase ] );
                } , bubble );

                middle.addEventListener( type , function(e){
                    console.log( this , e.target , e.eventPhase , phases[ e.eventPhase ] );
                } , capture );

                middle.addEventListener( type , function(e){
                    console.log( this , e.target , e.eventPhase , phases[ e.eventPhase ] );
                } , bubble );

                inner.addEventListener( type , function(e){
                    console.log( this , e.target , e.eventPhase , phases[ e.eventPhase ] );
                } , capture );

                inner.addEventListener( type , function(e){
                    console.log( this , e.target , e.eventPhase , phases[ e.eventPhase ] );
                } , bubble );

            })();
        </script>
        
    </body>
</html>